<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/bearing.css">
    <link rel="stylesheet" href="css/order.css">
    <script src="js/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/echarts.min.js"></script>
</head>

<body>
    <div id="bearingPage" class="appPage">
        <header>
            <div class="projectName">汽车轴承剩余寿命预测平台</div>
            <div class="routeList">
                <a href="index.jsp">首页</a>
                <a href="bearing.jsp">轴承</a>
                <a href="life.html">寿命监测</a>
                <a href="./order.html">订单管理</a>
                <a href="aboutUs.html">关于我们</a>
            </div>
            <div class="adminInfo">
                <el-tooltip content="数据可视化" placement="top">
                    <a href="车辆综合管控平台/index.html"><i class="el-icon-data-line"></i></a>
                </el-tooltip>
                <div class="avatar">
                    <!-- <img src="" alt=""> -->
                    <i class="el-icon-user-solid"></i>
                </div>
            </div>
        </header>
        <main>
            <div class="chartBox">
                <div id="barChart" style="width: 48%;height: 450px;">
                </div>
                <div id="pieChart" style="width: 48%;height: 450px;">
                </div>
            </div>
            <div class="bearingInfo">
                <table border="0">
                    <thead>
                        <tr>
                            <th>
                                车辆类型
                            </th>
                            <th>
                                车牌号
                            </th>
                            <th>
                                司机姓名
                            </th>
                            <th>
                                手机号
                            </th>
                            <th>
                                轴承型号
                            </th>
                            <th>
                                标准值
                            </th>
                            <th>
                                当前值
                            </th>
                            <th>
                                损耗占比
                            </th>
                            <th>
                                预测剩余寿命
                            </th>
                            <th>
                                记录时间
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in tableData">
                            <td>{{item.carType}}</td>
                            <td>{{item.carId}}</td>
                            <td>{{item.driverName}}</td>
                            <td>{{item.driverPhone}}</td>
                            <td>{{item.id}}</td>
                            <td>{{item.data}}</td>
                            <td>{{item.currentData}}</td>
                            <td>{{item.percent}}</td>
                            <td>{{item.life}}</td>
                            <td>{{item.time}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </main>
    </div>
    <script>
        new Vue({
            el: '#bearingPage',
            data() {
                return {
                    tableData: [{
                        carType: "汽车",
                        carId: "陕A UN331",
                        driverName: "张光武",
                        driverPhone: 15686115973,
                        id: "PNA20/42",
                        data: 144,
                        currentData: 137,
                        percent: "4.87%",
                        life: "10年",
                        time: '2024-05-30 15:25:21'
                    },
                    {
                        carType: "汽车",
                        carId: "陕A AH561",
                        driverName: "王天翔",
                        driverPhone: 15594112943,
                        id: "PNA20/42",
                        data: 144,
                        currentData: 121,
                        percent: "15.08%",
                        life: "8年",
                        time: '2024-05-15 13:11:41'
                    },{
                        carType: "摩托",
                        carId: "陕A FU566",
                        driverName: "张帅",
                        driverPhone: 15586472295,
                        id: 32910,
                        data: 132,
                        currentData: 119,
                        percent: "10.09%",
                        life: "8年",
                        time: '2024-04-16 09:35:12'
                    },
                    {
                        carType: "普通货车",
                        carId: "陕U FU566",
                        driverName: "朱耀武",
                        driverPhone: 16689461523,
                        id: 32558,
                        data: 129,
                        currentData: 115,
                        percent: "9.21%",
                        life: "7年",
                        time: '2024-05-26 07:51:27'
                    },{
                        carType: "挂车",
                        carId: "陕B UT579",
                        driverName: "李红河",
                        driverPhone: 18956143379,
                        id: 32910,
                        data: 115,
                        currentData: 97,
                        percent: "15.72%",
                        life: "6年",
                        time: '2024-04-06 15:57:28'
                    },{
                        carType: "汽车",
                        carId: "陕A GI451",
                        driverName: "李飞",
                        driverPhone: 15686171907,
                        id: "PNA20/42",
                        data: 144,
                        currentData: 68,
                        percent: "52.88%",
                        life: "3年",
                        time: '2024-03-05 07:45:21'
                    }]
                }
            },
            mounted() {
                this.initBarChart();
                this.initPieChart();
            },
            methods: {
                initBarChart() {
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('pieChart'));
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '今日统计',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        tooltip: {},
                        legend: {
                            data: ['销量'],
                        },
                        grid: {
                            bottom: 20
                        },
                        xAxis: {
                            data: ['卡车', '汽车', '挂车', '普通货车', '摩托', '三轮车'],
                            axisLabel: {
                                color: '#fff'
                            }
                        },
                        yAxis: {
                            axisLabel: {
                                color: '#fff'
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(255,255,255,.1)',
                                },
                            },
                        },
                        series: [
                            {
                                name: '检测数量',
                                type: 'bar',
                                data: [10, 17, 5, 10, 15, 3],
                                barWidth: 30,
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: "rgb(0, 0, 227,.3)" },
                                        { offset: 1, color: "rgb(0, 104, 220,.3)" },
                                    ]),
                                    borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: "#0076fa" },
                                        { offset: 1, color: "transparent" },
                                    ]),
                                },
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },
                initPieChart() {
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('barChart'));
                    // 指定图表的配置项和数据
                    var option = {
                        legend: {
                            top: 'bottom',
                            textStyle: {
                                color: "#fff"
                            }
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: { show: true },
                                dataView: { show: true, readOnly: false },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },
                        series: [
                            {
                                name: 'Nightingale Chart',
                                type: 'pie',
                                radius: [50, 200],
                                center: ['50%', '50%'],
                                roseType: 'area',
                                itemStyle: {
                                    borderRadius: 8
                                },
                                data: [{ value: 17, name: '汽车' },
                                { value: 15, name: '摩托' },
                                { value: 10, name: '卡车' },
                                { value: 10, name: '普通货车' },
                                { value: 7, name: '挂车' },
                                { value: 3, name: '三轮车' }
                                ]
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },
            }
        })
    </script>
</body>

</html>